<template>
    <view class="zyby-img-upload-common auth-img-item" :class="{'img-item-special': !imgUrl}">
        <div v-if="!imgUrl" @tap="ChooseImage" class='flex-perfect-center'>
            <slot name="image">
                <image src="/static/img/btn_data_upload.png"></image>
            </slot>
            <div class="text-desc">
                <slot>上传图片</slot>
            </div>
        </div>
        <img class="exist-img" v-else :src="imgUrl" @tap="ChooseImage">
        <!-- <progress class="upload-progress" v-if="progress > 0" :percent="progress" active stroke-width="3"></progress> -->
        <img class="img-delete" v-if="imgUrl && deleteFlag" src="/static/icon_img/icn_delete.png" @tap="DelImg">
    </view>
</template>

<script>
    //import OSSUtil from '@/common/libs/ossUtil.js'
	//接口
	import {
		getOssUploadsParams
	} from '@/common/api.js'
    export default {
        name: 'byImgUpload',
        props: {
            authId: String,
            imgUrl: String,
            deleteFlag: Boolean,
            startShowAction: Function,
            startDelete: Function,
            imgActions: Array
        },
        data() {
            return {
                progress: 0,
                imgData: {
                    visible: false,
                    actions: this.imgActions
                }
            }
        },
        methods: {
            async ChooseImage() {
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album', 'camera'],
				    success: (file_res) => {
						let filename = file_res.tempFilePaths[0]
						let pos = filename.lastIndexOf('.')
						let suffix = ''
						if (pos != -1) {
						    suffix = filename.substring(pos)
						}
						let file_name = new Date().getTime() + Math.random().toString(36).substring(3, 20) + suffix
						getOssUploadsParams().then(res=>{
							console.log(123,res)
							let uploadTask = uni.uploadFile({
							    url: res.data.host,
							    filePath: filename,
							    fileType: 'image',
							    name: 'file',
							    formData: {
							        name: filename,
							        'key': res.data.dir+file_name,
							        'policy': res.data.policy,
							        'OSSAccessKeyId': res.data.accessid,
							        'success_action_status': '200',
							        //让服务端返回200,不然，默认会返回204
							        'signature': res.data.signature,
							    },
							    success: (res) => {
							        console.log('uploadImage success, res is:', res)
							        uni.showToast({
							            title: '上传成功',
							            icon: 'success',
							            duration: 1000
							        });
							        //this.$emit('imgUploaded', {data: res.data.host + fileName, authId: this.authId});
							    },
							    fail: (err) => {
							        console.log('uploadImage fail', err);
							        uni.showModal({
							            content: err.errMsg,
							            showCancel: false
							        });
							    }
							});
							uploadTask.onProgressUpdate((res) => {
							    console.log("上传进度" + res.progress);
							    this.progress = res.progress;
							});
						})
				        //resolve(res)
				    }
				})
				
				return false
                // let files = await OSSUtil.getImage(); // 选择图片
                // let sign = await OSSUtil.get_STS() // 获取签名等信息

                // let imageSrc = files.tempFilePaths[0];
                // let fileName = OSSUtil.getFileName(imageSrc); // 自定义上传后的文件名称
                
                

                // this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
            },
            ViewImage(e) {
                uni.previewImage({
                    urls: this.imgList,
                    current: e.currentTarget.dataset.url
                });
            },
            DelImg() {
                this.$emit('imgDel', {
                    authId: this.authId
                });
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    /* @import "../style/function.less";
    @import "../style/variable.less"; */

    .zyby-img-upload-common {
        height: 450rpx;
        width: 100%;
        margin-top: 26rpx;
    }

    .auth-img-item {
        position: relative;

        .exist-img {
            width: 100%;
            height: 100%;
        }

        .upload-progress {
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
        }

        .img-delete {
            //.square-hw(36);
            position: absolute;
            top: 10rpx;
            right: 10rpx;
        }
    }

    .img-item-special {
        border: 1px dashed #13DBBF;
        /*no*/
        border-radius: 6rpx;
        /*no*/
    }
</style>